<template>
    <el-card style="max-width: 480px" class="card">
        <template #header>
            <div class="card-header cardHeader">
                <el-icon>
                    <BellFilled />
                </el-icon>
                <Vue3SeamlessScroll :list="announcementData" direction="left" :hover="true" :singleLine="true"
                    class="scroll" :limitScrollNum="0">
                    <div class="item">{{ announcementData[0].content }}</div>
                </Vue3SeamlessScroll>
            </div>
        </template>
        <p v-for="item in announcementData" :key="item.id" class="text item">{{ item.content }}</p>
    </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
let announcementData = ref([
    { id: "0001", content: "好消息！好消息！降价大甩卖", isCancellation: false },
    { id: "0001", content: "坏消息！坏消息！要涨价了", isCancellation: false }
]);
onMounted(() => { console.log("111111") })

</script>
<style lang="scss" scoped>
.scroll {
    overflow: hidden;
    color: rgb(93, 40, 227);

    .item {
        margin-right: 80px;
        cursor: pointer;
    }
}

.cardHeader {
    display: flex;
    align-items: center
}

.card {
    margin: 5px 0 0 5px;
}
</style>